<style>
    :root {
        --color: red;
    }

    p {
        color: var(--color, aqua);
    }
</style>
<p>文本</p>

<input id="colorVal" type="color" value="#FF0000">
<button onclick="setColor()"> 修改颜色</button>
<script>
    let element = document.querySelector(':root')
    let v = getComputedStyle(element).getPropertyValue('--color')
    console.log("--color:", v);
    function setColor() {
        let color = document.getElementById('colorVal').value
        element.style.setProperty('--color', color);
    }
</script>